<template>
<div>
    <div class="banner" @click="clickBanner">
       <img class="banner-img" src="https://img1.qunarzz.com/p/tts1/1801/59/31bb5f1159fe9f02.jpg_r_640x420x90_7908b8fc.jpg">
       <div class="banner-info"> 
           <div class="banner-title">大连圣亚海洋世界(AAAA景区)</div>
           <div class="banner-number"><span class="iconfont banner-icon">&#xe631;</span>39</div>
       </div>
    </div>
 <gallary :imgs="imgs" v-show="showGrllary" @close="handleGrllaryClose"></gallary> 
</div>

</template>
<script>
import Gallary from 'common/gallary/Gallary'
export default {
    name:'Banner',
    data(){
        return{
            showGrllary:false,
            imgs:['https://img1.qunarzz.com/p/tts1/1801/59/31bb5f1159fe9f02.jpg_r_640x420x90_7908b8fc.jpg',
            'https://img1.qunarzz.com/p/tts1/1801/59/31bb5f1159fe9f02.jpg_r_640x420x90_7908b8fc.jpg',
            'https://img1.qunarzz.com/p/tts1/1801/59/31bb5f1159fe9f02.jpg_r_640x420x90_7908b8fc.jpg'
            ]
        }
    },
    methods:{
        clickBanner:function(){
            this.showGrllary=true
        },
        handleGrllaryClose:function(){
             this.showGrllary=false
        }
    },
    components:{
        Gallary
    }
}
</script>
<style lang="stylus" scoped>
.banner
  position relative
  overflow hidden;
  height:0;
  padding-bottom:55%;
  .banner-img
    width:100%
  .banner-info
    display flex
    position:absolute
    left:0;
    right:0;
    bottom:0;
    line-height .6rem
    color:#fff;
    background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
    .banner-title
      flex:1
      font-size:.32rem;
      padding:0 .2rem;
    .banner-number
        padding:0 .4rem
        margin-top:.14rem
        line-height :.32rem
        height:.32rem;
        border-radius:.2rem;
        background rgba(0,0,0,.8)
        font-size:.24rem
        .banner-icon
          font-size:.24rem
</style>

